<template>
  <el-card style="padding: 20px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);">
    <el-table :data="students" style="width: 100%;" border stripe>
      <el-table-column label="编号" prop="id" />
      <el-table-column label="姓名" prop="name" />
      <el-table-column label="性别" prop="gender" />
      <el-table-column label="年龄" prop="age" />
      <el-table-column label="手机" prop="cellphone" />
      <el-table-column label="籍贯" prop="address" />
      <el-table-column align="right">
        <template #header>
          <el-input v-model="keyword" size="small" placeholder="搜索学生" style="width: 200px;" />
        </template>
        <template #default="scope">
          <el-button size="small" style="margin-right: 10px;">
            Edit
          </el-button>
          <el-button size="small" type="danger">
            Delete
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
export default {
  name: "StudentView",
  data(){
    return {
      students: [],
      keyword: ''
    }
  },
  methods:{
    loadStudent(){
      this.$axios.get('/students')
          .then(result => {
            if(result.data.code === 200){
              this.students = result.data.data;
            }
          })
    }
  },
  mounted() {
    this.loadStudent()
  }
}
</script>

<style scoped>
.el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color: #f5f7fa;
}

.el-table__row:hover {
  background-color: #e6f7ff !important;
}
</style>